<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <title>mobile panel</title>
        <script src="zepto.min.js"></script>
        <script src="panel1.js"></script>
        <!--
            css3偏移的容器里或者INPUT等焦点，IOS手机上fix定位都会出失效的BUG，兼容方式就只能是位置偏移，暂时无法使用fixed。如果使用CSS3偏移，那么偏移容器里不要有FIXED定位元素。
            DIV 滚动条在低版本的手机会存在问题，目前可以忽悠，手机更新换代很快，95%的都支持了。
        -->
        <style>
             html,body,div {
                padding:0;
                margin:0;           
             }

             body {
                overflow-x:hidden;
             }             

             .page {
                position:absolute;
                width:100%;
                height:100%;
             }

             #index {
                
             }

             #panel {
                display:none;
                z-index:10;
                width:260px;
                background:#fff;
             }

             #panel .panel_dismiss {
                position: absolute;
                z-index: 1000;
                top: 0px;
                left: 260px;
                height:100%;
                display:none;
             }

             .header {
                position: absolute;
                z-index: 2;
                height:45px;
                width:100%;
                top:0px;
                background:#ccc;
                line-height:45px;
                text-align:center;
             }

             .footer {
                position: absolute;
                z-index: 2;
                height:45px;
                width:100%;
                bottom:0px;
                background:#ccc;
                line-height:45px;
                text-align:center;
             }

             .bodyer {         
                position:absolute;
                top:45px;
                bottom:45px;           
                /* 下面替换上面3个属性也是可以的            
                height: 100%;
                border-top:45px solid transparent;
                border-bottom:45px solid transparent;
                box-sizing: border-box;
                */
                background:#666;
                width:100%;             
                overflow: auto;         
                -Webkit-overflow-scrolling: touch;
             }

        </style>
        <script>

             function FullScreen() {
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                }
                else if (docElm.msRequestFullscreen) {
                    docElm.msRequestFullscreen();
                }
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                }
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }
             }

             $(document).ready(function(){                 

                 var panel = new window.panel({id:'panel'});

                 $('.header').click(function(e){
                      panel.open('index');
                 });

                 $('.panel_dismiss').click(function(){
                      panel.close('index');
                 });

                 $('.footer').click(function(e){
                      FullScreen();
                 });

                 /*
                 $('.bodyer').scrollTop(150);
                 setTimeout(function(){
                      $('.bodyer').scrollTop(0);
                 },2000);
                 */
             });
        </script>
   </head>
   <body>

       <div id="panel" class='page'>
            <div class="panel_content">panel</div>
            <div class="panel_dismiss"></div>
       </div>
       
       <div id="index" class='page'>
            <header class="header">顶部固定区域</header>
 
            <div class="bodyer">
                 <div> 内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br></div> 
            </div>

            <footer class="footer">底部固定区域</footer>
       </div>
   
   </body>
</html>
